import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/model/store.dart';
import 'package:gourmet/ui/draw_under_line.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/styles.dart';

class CaterStoreController extends GetxController {}

class CaterStoreView extends GetView<CaterStoreController> {
  const CaterStoreView({super.key});

  @override
  Widget build(BuildContext context) {
    return const Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [],
    );
  }
}

class RetailStoreController extends GetxController {
  List<CategoryStore> categorys = [];
  RxInt tabIdx = RxInt(0);

  RxInt nextIdx = RxInt(0);

  @override
  void onInit() {
    initData();
    super.onInit();
  }

  void initData() {
    categorys.add(
      CategoryStore(
        name: '水果',
        children: [
          CategoryStore(name: '整装水果店'),
          CategoryStore(name: '鲜切水果/果捞店')
        ],
      ),
    );
    categorys.add(
      CategoryStore(name: '食材'),
    );
    categorys.add(
      CategoryStore(name: '母婴'),
    );
    categorys.add(
      CategoryStore(name: '宠物'),
    );
    categorys.add(
      CategoryStore(name: '超市便利'),
    );
    categorys.add(
      CategoryStore(name: '食品专营'),
    );
    categorys.add(
      CategoryStore(name: '日用百货'),
    );
    categorys.add(
      CategoryStore(name: '美妆日化'),
    );
  }
}

class RetailStoreView extends GetView<RetailStoreController> {
  const RetailStoreView({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 50,
          color: Colors.white,
          child: DrawUnderLine(
              child: Row(
            children: [
              Expanded(
                child: Center(
                  child: Text(
                    '主营品类',
                    style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize15,
                      color: ColorsUtils.colorFf64,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Center(
                  child: Text(
                    '辅营品类(选填)',
                    style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize15,
                      color: ColorsUtils.color0000,
                    ),
                  ),
                ),
              ),
            ],
          )),
        ),
        Expanded(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                width: 100,
                child: ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    return Obx(
                      () => Container(
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: index == controller.tabIdx.value
                              ? Colors.white
                              : HexColor(ColorsUtils.colorF9f9),
                          borderRadius: activeRadius(index),
                        ),
                        child: Text(
                          controller.categorys[index].name,
                          style: StylesUtils.customTextStyle(
                            color: controller.tabIdx.value == index
                                ? ColorsUtils.colorFf64
                                : ColorsUtils.color7979,
                            fontSize: StylesUtils.fontSize15,
                          ),
                        ),
                      ).onTap(() {
                        controller.tabIdx.value = index;
                        controller.nextIdx.value = 0;
                      }),
                    );
                  },
                  itemCount: controller.categorys.length,
                  itemExtent: 50,
                ),
              ),
              Expanded(
                child: ColoredBox(
                  color: Colors.white,
                  child: Obx(
                    () => ListView.builder(
                      padding: const EdgeInsets.only(left: 15),
                      itemBuilder: (_, index) {
                        return Container(
                          height: 50,
                          alignment: Alignment.centerLeft,
                          child: Obx(
                            () => Text(
                              controller.categorys[controller.tabIdx.value]
                                  .children[index].name,
                              style: StylesUtils.customTextStyle(
                                color: controller.nextIdx.value == index
                                    ? ColorsUtils.colorFf64
                                    : ColorsUtils.color7979,
                                fontSize: StylesUtils.fontSize15,
                              ),
                            ).onTap(() {
                              controller.nextIdx.value = index;
                            }),
                          ),
                        );
                      },
                      itemCount: controller
                          .categorys[controller.tabIdx.value].children.length,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  BorderRadius? activeRadius(int index) {
    if (controller.tabIdx.value + 1 == index && controller.tabIdx.value == 0) {
      return const BorderRadius.only(
        topRight: Radius.circular(10),
      );
    }
    if (controller.tabIdx.value + 2 == controller.categorys.length &&
        index + 2 == controller.categorys.length) {
      return const BorderRadius.only(
        bottomRight: Radius.circular(10),
      );
    }
    if (controller.tabIdx.value == index + 1) {
      return const BorderRadius.only(
        bottomRight: Radius.circular(10),
      );
    }
    if (controller.tabIdx.value + 1 == index) {
      return const BorderRadius.only(
        topRight: Radius.circular(10),
      );
    }
    return null;
  }
}
